<template>
	<view class="home__container__info__body u-f-ac u-f-juc">
		<text 
		class="icon iconfont"
		v-for="item in providerList" :key="item.id"
		v-show="item.iconClass!=''"
		:class="['icon-'+item.iconClass,'home__container__info__body--'+item.clazz]"
		@tap="toLogin(item)">{{item.providerName}}</text>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app';
	import {ref,reactive} from 'vue';
	import {bindLongApi} from '../../api/user.js';
	import user from '../../common/user.js';
	const providerList = ref([])
	function toLogin(provider){
		
		// 	if (provider.id === 'univerify') {
		// 		this.univerifyBtnLoading = true;
		// 	}
		
			// 一键登录已在APP onLaunch的时候进行了预登陆，可以显著提高登录速度。登录成功后，预登陆状态会重置
			uni.login({
				provider: provider.id,
				// #ifdef MP-ALIPAY
				scopes: 'auth_user', //支付宝小程序需设置授权类型
				// #endif
				success: async (res) => {
					console.log('login success:', res);
					bindLongApi(res.authResult.access_token,res.authResult.openid,provider.id).then(res=>{
						user.token = res.token;
						user.access_token = res.access_token;
						uni.showToast({
							title: '登录成功'
						})
						uni.switchTab({
							url:"/pages/index/index"
						})
					})
					
					// 更新保存在 store 中的登录状态
					// this.login(provider.id);
		
					// #ifdef APP-PLUS
					// this.setUniverifyLogin(provider.id === 'univerify')
					// switch (provider.id) {
					// 	case 'univerify':
					// 		this.loginByUniverify(provider.id, res)
					// 		break;
					// 	case 'apple':
					// 		this.loginByApple(provider.id, res)
					// 		break;
					// }
					// #endif
		
					// #ifdef MP-WEIXIN
					console.warn('如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id')
					uni.request({
						url: 'https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center',
						method: 'POST',
						data: {
							action: 'loginByWeixin',
							params: {
								code: res.code,
								platform: 'mp-weixin'
							}
						},
						success(res) {
							console.log(res);
							if (res.data.code !== 0) {
								console.log('获取openid失败：', res.data.errMsg);
								return
							}
							uni.setStorageSync('openid', res.data.openid)
						},
						fail(err) {
							console.log('获取openid失败：', err);
						}
					})
					// #endif
				},
				fail: (err) => {
					console.log('login fail:', err);
		
					// 一键登录点击其他登录方式
					if (err.code == '30002') {
						uni.closeAuthView();
						uni.showToast({
							title: '其他登录方式'
						})
						return;
					}
		
					// 未开通
					if (err.code == 1000) {
						uni.showModal({
							title: '登录失败',
							content: `${err.errMsg}\n，错误码：${err.code}`,
							confirmText: '开通指南',
							cancelText: '确定',
							success: (res) => {
								if (res.confirm) {
									setTimeout(() => {
										plus.runtime.openWeb('https://ask.dcloud.net.cn/article/37965')
									}, 500)
								}
							}
						});
						return;
					}
		
					// 一键登录预登陆失败
					if (err.code == '30005') {
						uni.showModal({
							showCancel: false,
							title: '预登录失败',
							content: err.errMsg
						});
						return;
					}
		
					// 一键登录用户关闭验证界面
					if (err.code != '30003') {
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: JSON.stringify(err)
						});
					}
				},
				complete: () => {
					// this.univerifyBtnLoading = false;
				}
			});
		
	}
	
	onLoad(()=>{
			// 获取服务供应商
			uni.getProvider({
				// 第三方登录
				service: 'oauth',
				success: (result) => {
					providerList.value = result.provider.map((value) => {
						let providerName = '';
						let iconClass = '';
						let clazz = '';
						switch (value) {
							case 'weixin':
								providerName = '微信登录';
								iconClass="weixin";
								clazz = "weixin";
								break;
							case 'qq':
								providerName = 'QQ登录';
								iconClass="qq";
								clazz = "qq";
								break;
							case 'sinaweibo':
								providerName = '新浪微博登录';
								iconClass="xinlangweibo";
								clazz = "xinlangweibo";
								break;
							case 'alipay':
								providerName = '支付宝登录'
								
								break;
						}
						return {
							name: providerName,
							iconClass,
							clazz,
							id: value
						}
					});
				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
			
		
			// if (this.hasLogin && this.isUniverifyLogin) {
			// 	this.getPhoneNumber(uni.getStorageSync(univerifyInfoKey)).then((phoneNumber) => {
			// 		this.phoneNumber = phoneNumber
			// 	})
			// }
		
	})
	
	
</script>

<style scoped lang="scss">
	.home__container__info__body {
		
			padding: 26upx 0;
			>text {
				color: white;
				border-radius: 50%;
				padding: 30upx;
				margin: 16upx 20upx;
				font-size: 50upx;
				
			}
			&--weixin{
				background-color: #10ad9b;
			}
			&--qq{
				background-color: #13a0ff;
			}
			&--xinlangweibo{
				background-color: #ff861c;
			}
		
	}
</style>